<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>英雄联盟LPL2023春季赛</title>
    <link rel="icon" href="img/p2.png">
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            font-family: font;
        }

        @font-face {
            font-family: font;
            src: url(css/DingTalk_JinBuTi_Regular.woff), url(css/DingTalk_JinBuTi_Regular.woff2);
        }

        body {
            background: url(img/p1.jpg)no-repeat center center fixed;
            background-size: cover;
        }

        .biaoti {
            font-size: 36px;
            position: absolute;
            color: aliceblue;
            position: absolute;
            margin-left: 450px;
            text-align: center;
            line-height: 60px;
        }

        .zhandui {
            margin-right: 60px;
            position: absolute;
            text-align: center;
            line-height: 0px;
            position: relative;
            float: right;
        }

        .zhandui span {
            background: #878787;
        }

        .geren {
            display: inline;
        }

        .zhuce {
            text-align: center;
            line-height: 40px;
            position: absolute;
            margin-left: 60px;
            float: left;
            display: inline;
        }

        .zhuce span {
            background: #878787;
        }

        .dengru {
            display: inline;
        }

        .head {
            font-size: 20px;
            color: aliceblue;
            background-color: #191b2a;
        }

        .mainbody {
            color: #191b2a;
        }

        #showTime {
            margin: 0px;
        }

        .line1 {
            float: left;
            width: 300px;
            margin: 15px 0 0 20px;
        }

        #data1 {
            float: left;
            width: 332px;
            height: 260px;
            margin-top: 5px;
        }

        .champion {
            position: absolute;
            padding: 150px;
            padding-left: 0px;
        }

        .table1 th {
            border-bottom: 1px solid rgba(255, 255, 255, 1);
            font-size: 20px;
            color: #191b2a;
            font-weight: normal;
            padding: 0 0 10px 0;
            text-align: center
        }

        .table1 td {
            font-size: 16px;
            color: #191b2a;
            padding: 15px 0 0 0;
            text-align: center
        }

        .table1 span {
            width: 24px;
            height: 24px;
            border-radius: 3px;
            display: block;
            background: #878787;
            color: #fff;
            line-height: 24px;
            text-align: center;
        }

        .table1 tr:nth-child(2) span {
            background: #ed405d
        }

        .table1 tr:nth-child(3) span {
            background: #f78c44
        }

        .table1 tr:nth-child(4) span {
            background: #49bcf7
        }

        a:hover {
            color: #eac05b;
        }

        .a {
            text-decoration: none;
            color: aliceblue;
        }

        #img1 {
            position: absolute;
            z-index: 99999;
            width: 100%;
            height: 100%;
            
        }
    </style>

</head>
<script>
    function init() {
        time_1 = setInterval("showAd()", 750);
    }

    function showAd() {
        document.getElementById("img1").style.display = "block";
        //清除显示图片的定时操作
        clearInterval(time_1);
        time_1 = setInterval("hiddenAd()", 750);

    }

    function hiddenAd() {
        document.getElementById("img1").style.display = "none";
        //清除隐藏图片的定时操作
        clearInterval(time_1);
    }
</script>
<body onload="init()">
    <img src="img/p4.jpg" id="img1">
    <script>
        var t = setTimeout(time, 1000); /*开始运行*/
        function time() {
            dt = new Date();
            var y = dt.getFullYear();
            var mt = dt.getMonth() + 1;
            var day = dt.getDate();
            var h = dt.getHours();
            var m = dt.getMinutes();
            var s = dt.getSeconds();
            var element = document.getElementById("showTime");
            element.innerHTML = '<h3>' + y + " 年 " + mt + "月 " + day + " 日 " + h + "  时 " + m + "分 " + s + "秒 ";

        }
        setInterval('time()', 1000)
    </script>

    <script src="js/echarts.min.js"></script>
    <div class="biaoti"><span><img src="img/p3.png" alt="" height="25 " width="120">&nbsp;英雄联盟LPL2023春季赛数据</span></div>
    <div class="head" style="height:70px ;">

        <div id="showTime"><span></span></div>
        <div class="zhandui"><span><a href="#" class="a" id="xq">战队详情</a></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <div class="geren"><span><a href="#" class="a" id="grkj">个人空间</a> </span></div>
        </div>
        <div class="zhuce"><span id="zhuce"><img src="img/p8.png" alt="" height="16px" width="18px"><a
                    href="create.html?from=index_xbtzy.html$"
                    class="a">注册</a></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <div class="dengru"><span><img src="img/p7.png" alt="" height="16px" width="16px" color="white"><a
                        href="login.html?from=index_xbtzy.html$" class="a">登入</a></span>
            </div>
        </div>

    </div>

    <div class="mainbody">
        <br>
        <div style="position: absolute;float: left;margin-left: 1155px; ">

            <h2>战队排行榜</h2>
            <table class="table1" width="100%" border="0" cellspacing="0" cellpadding="0"
                style="background-color: rgba(144, 190, 198, 0.2) ;">
                <tbody>
                    <tr>
                        <th scope="col" class="toptop">排名</th>
                        <th scope="col">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;战队</th>
                        <th scope="col">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;出场次数</th>
                        <th scope="col">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;胜率</th>
                    </tr>
                    <tr>
                        <td><span>1</span></td>
                        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;JDG</td>
                        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;19<br></td>
                        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;84%<br></td>
                    </tr>
                    <tr>
                        <td><span>2</span></td>
                        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;LNG</td>
                        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;17</td>
                        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;76%</td>
                    </tr>

                    <tr>
                        <td><span>3</span></td>
                        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;EDG</td>
                        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;19</td>
                        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;73%</td>
                    </tr>
                    <tr>
                        <td><span>4</span></td>
                        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;WBG</td>
                        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;17</td>
                        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;64%</td>
                    </tr>
                    <tr>
                        <td><span>5</span></td>
                        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;BLG</td>
                        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;22</td>
                        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;63%</td>
                    </tr>

                </tbody>
            </table>

        </div>


        <div class="line1 ">
            <h2 style="margin-left: -15px;">个人数据</h2>

            <div id="data1"
                style="height:360px;width:330px;background-color: rgba(144, 190, 198, 0.2) ;margin-left: -15px;"></div>
            <script>
                var chart1 = echarts.init(document.getElementById("data1"));
                var option1 = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            // Use axis to trigger tooltip
                            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
                        }
                    },
                    legend: {
                        textStyle: {
                            fontSize: 18, //字体大小
                            color: '#6F6F6F' //字体颜色
                        },

                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#6F6F6F'
                            }
                        }

                    },
                    yAxis: {
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#6F6F6F'
                            }
                        },
                        type: 'category',
                        data: ['Elk', 'Jackeylove', 'knight', 'Mark', 'Rookie', 'MISSING', 'Ruler']
                    },
                    series: [{
                        name: '出场次数',
                        type: 'bar',
                        stack: 'total',
                        label: {
                            show: true
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: [22, 18, 19, 18, 18, 19, 19]
                    }, {
                        name: '总击杀',
                        type: 'bar',
                        stack: 'total',
                        label: {
                            show: true
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: [356, 203, 212, 46, 190, 41, 226]
                    }, {
                        name: '总助攻',
                        type: 'bar',
                        stack: 'total',
                        label: {
                            show: true
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: [347, 262, 300, 441, 243, 519, 265]
                    }, {
                        name: '总死亡',
                        type: 'bar',
                        stack: 'total',
                        label: {
                            show: true
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: [144, 108, 91, 100, 87, 107, 56]
                    },

                    ]
                };
                chart1.setOption(option1);
            </script>

            <div class="zhanji"
                style="padding-left: 28px;padding-bottom: 300px;width: 780px;position: absolute;height: 300px;display:inline;">

                <div class style="display: inline;font-size: 18px;">
                    <span>JDG-胜率最高</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <div id="data3"
                        style="height: 160px;width:160px;position: absolute;float: left;margin-left: -25px;background-color: rgba(144, 190, 198, 0.2) ">
                    </div>
                    <script>
                        var chart3 = echarts.init(document.getElementById("data3"));
                        var option3 = {
                            tooltip: {
                                trigger: 'item'
                            },
                            legend: {
                                top: '5%',
                                left: 'center',
                                textStyle: {
                                    color: '#6F6F6F',
                                    fontSize: 16
                                },
                            },
                            series: [{

                                name: 'Access From',
                                type: 'pie',
                                radius: ['30%', '50%'],
                                avoidLabelOverlap: false,
                                label: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    label: {
                                        show: true,
                                        fontSize: 40,
                                        fontWeight: 'bold'
                                    }
                                },
                                labelLine: {
                                    show: false
                                },
                                data: [{
                                    value: 16,
                                    name: '胜利',
                                    itemStyle: {
                                        color: '#8CCCF4'
                                    }
                                }, {
                                    value: 3,
                                    name: '战败',
                                    itemStyle: {
                                        color: '#BCBCBB'
                                    }
                                }]
                            }]
                        };
                        chart3.setOption(option3);
                    </script>
                    <div class style="display:inline;font-size: 18px;">
                        <span>BLG-击杀最多</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

                        <div id="data4"
                            style="height: 160px;width:160px;position: absolute;float: left;margin-left: 135px;background-color:rgba(144, 190, 198, 0.2) ">
                        </div>

                        <script>
                            var chart4 = echarts.init(document.getElementById("data4"));
                            var option4 = {
                                tooltip: {
                                    trigger: 'item'
                                },
                                legend: {
                                    top: '5%',
                                    left: 'center',
                                    textStyle: {
                                        color: '#6F6F6F',
                                        fontSize: 16
                                    },
                                },
                                series: [{
                                    name: 'Access From',
                                    type: 'pie',
                                    radius: ['30%', '50%'],
                                    avoidLabelOverlap: false,
                                    label: {
                                        show: false,
                                        position: 'center'
                                    },
                                    emphasis: {
                                        label: {
                                            show: true,
                                            fontSize: 40,
                                            fontWeight: 'bold'
                                        }
                                    },
                                    labelLine: {
                                        show: false
                                    },
                                    data: [{
                                        value: 998,
                                        name: '击杀',
                                        itemStyle: {
                                            color: '#ADFA25'
                                        }
                                    }, {
                                        value: 856,
                                        name: '死亡',
                                        itemStyle: {
                                            color: '#BCBCBB'
                                        }
                                    }]
                                }]
                            };
                            chart4.setOption(option4);
                        </script>
                    </div>
                    <div class style="display:inline;font-size: 18px;">
                        <span>BLG-死亡最多</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <div id="data5"
                            style="height: 160px;width:160px;position: absolute;float: left;margin-left: 295px;background-color: rgba(144, 190, 198, 0.2) ">
                        </div>
                        <script>
                            var chart5 = echarts.init(document.getElementById("data5"));
                            var option5 = {
                                tooltip: {
                                    trigger: 'item'
                                },
                                legend: {
                                    top: '5%',
                                    left: 'center',
                                    textStyle: {
                                        color: '#6F6F6F',
                                        fontSize: 16
                                    },
                                },
                                series: [{
                                    name: 'Access From',
                                    type: 'pie',
                                    radius: ['30%', '50%'],
                                    avoidLabelOverlap: false,
                                    label: {
                                        show: false,
                                        position: 'center'
                                    },
                                    emphasis: {
                                        label: {
                                            show: true,
                                            fontSize: 40,
                                            fontWeight: 'bold'
                                        }
                                    },
                                    labelLine: {
                                        show: false
                                    },
                                    data: [{
                                        value: 856,
                                        name: '死亡',
                                        itemStyle: {
                                            color: '#FCCCDC'
                                        }

                                    }, {
                                        value: 998,
                                        name: '击杀',
                                        itemStyle: {
                                            color: '#BCBCBB'
                                        }

                                    }]
                                }]
                            };
                            chart5.setOption(option5);
                        </script>
                    </div>
                    <div class style="display:inline;font-size: 18px;">
                        <span>TT-插眼最多</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <div id="data6"
                            style="height: 160px;width:160px;position: absolute;float: left;margin-left: 455px;background-color: rgba(144, 190, 198, 0.2) ">
                        </div>
                        <script>
                            var chart6 = echarts.init(document.getElementById("data6"));
                            var option6 = {
                                tooltip: {
                                    trigger: 'item'
                                },
                                legend: {
                                    top: '5%',
                                    left: 'center',
                                    textStyle: {
                                        color: '#6F6F6F',
                                        fontSize: 16
                                    },
                                },
                                series: [{
                                    name: 'Access From',
                                    type: 'pie',
                                    radius: ['30%', '50%'],
                                    avoidLabelOverlap: false,
                                    label: {
                                        show: false,
                                        position: 'center'
                                    },
                                    emphasis: {
                                        label: {
                                            show: true,
                                            fontSize: 40,
                                            fontWeight: 'bold'
                                        }
                                    },
                                    labelLine: {
                                        show: false
                                    },
                                    data: [{
                                        value: 109,
                                        name: '插眼',
                                        itemStyle: {
                                            color: '#EC4C2C'
                                        }
                                    }, {
                                        value: 57,
                                        name: '排眼',
                                        itemStyle: {
                                            color: '#BCBCBB'
                                        }

                                    }]
                                }]
                            };
                            chart6.setOption(option6);
                        </script>
                    </div>
                    <div class style="display:inline;font-size: 18px;">
                        <span>LNG-排眼最多</span>
                        <div id="data7"
                            style="height: 160px;width:160px;position: absolute;float: left;margin-left: 615px;background-color:rgba(144, 190, 198, 0.2) ">
                        </div>
                        <script>
                            var chart7 = echarts.init(document.getElementById("data7"));
                            var option7 = {
                                tooltip: {
                                    trigger: 'item'
                                },
                                legend: {
                                    top: '5%',
                                    left: 'center',
                                    textStyle: {
                                        color: '#6F6F6F',
                                        fontSize: 16
                                    },
                                },
                                series: [{
                                    name: 'Access From',
                                    type: 'pie',
                                    radius: ['30%', '50%'],
                                    avoidLabelOverlap: false,
                                    label: {
                                        show: false,
                                        position: 'center'
                                    },
                                    emphasis: {
                                        label: {
                                            show: true,
                                            fontSize: 40,
                                            fontWeight: 'bold'
                                        }
                                    },
                                    labelLine: {
                                        show: false
                                    },
                                    data: [{
                                        value: 59,
                                        name: '排眼',
                                        itemStyle: {
                                            color: '#FCE604'
                                        }
                                    }, {
                                        value: 96,
                                        name: '插眼',
                                        itemStyle: {
                                            color: '#BCBCBB'
                                        }
                                    }]
                                }]
                            };
                            chart7.setOption(option7);
                        </script>

                    </div>

                </div>

                </span>
                <br><br><br><br><br><br><br><br><br>
                <div class="zhanduishengfu" style="position: absolute;margin-left: 0px;margin-bottom: 30%;"><br>
                    <div>
                        <h2 style="margin-left: -25px;">战队胜负数据</h2>
                        <div id="data8"
                            style="height:320px;width:800px;margin-left: -25px;background-color: rgba(144, 190, 198, 0.2);">
                        </div>
                        <script>
                            var chart8 = echarts.init(document.getElementById("data8"));
                            var option8 = {
                                tooltip: {
                                    trigger: 'axis',
                                    axisPointer: {
                                        type: 'cross',
                                        crossStyle: {
                                            color: '#999'
                                        }
                                    }
                                },
                                toolbox: {

                                    feature: {
                                        dataView: {
                                            show: true,
                                            readOnly: false
                                        },
                                        magicType: {
                                            show: true,
                                            type: ['line', 'bar']
                                        },
                                        restore: {
                                            show: true
                                        },
                                        saveAsImage: {
                                            show: true
                                        }
                                    }
                                },
                                legend: {
                                    data: ['Victory', 'Defeat', '胜率'],
                                    textStyle: {
                                        color: '#6F6F6F',
                                        fontSize: 16
                                    },
                                },
                                xAxis: [{


                                    type: 'category',
                                    data: ['JDG', 'LNG', 'EDG', 'WBG', 'BLG', 'OMG', 'TES'],
                                    axisPointer: {
                                        type: 'shadow'
                                    },

                                }],
                                yAxis: [{

                                    type: 'value',
                                    name: '次数',
                                    min: 0,
                                    max: 30,
                                    interval: 10,

                                }, {
                                    type: 'value',
                                    name: '胜率',
                                    min: 0,
                                    max: 100,
                                    interval: 10,

                                }],
                                series: [{

                                    name: 'Victory',
                                    type: 'bar',

                                    data: [
                                        16, 13, 14, 11, 14, 12, 10,
                                    ]
                                }, {
                                    name: 'Defeat',
                                    type: 'bar',

                                    data: [
                                        3, 4, 5, 6, 8, 8, 8, 8,
                                    ]
                                }, {
                                    name: '胜率',
                                    type: 'line',
                                    yAxisIndex: 1,
                                    tooltip: {

                                    },
                                    data: [84, 76, 73, 64, 63, 60, 55]
                                }]
                            };
                            chart8.setOption(option8);
                        </script>

                    </div>

                </div>

            </div><br><br><br><br><br><br><br><br><br><br><br><br><br>

            <div style="position: absolute;float: left;margin-left: 1135px;">
                <h2>个人排行榜</h2>


                <table class="table1" width="100%" border="0" cellspacing="0" cellpadding="0"
                    style="background-color: rgba(144, 190, 198, 0.2) ;">
                    <tbody>
                        <tr>
                            <th scope=" col " class="toptop ">排名</th>
                            <th scope="col ">队员</th>
                            <th scope="col ">&nbsp;&nbsp;&nbsp;位置</th>
                            <th scope="col ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;总击杀</th>
                        </tr>
                        <tr>
                            <td><span>1</span></td>
                            <td>JDG-Ruler</td>
                            <td>&nbsp;&nbsp;&nbsp;&nbsp;ADC<br></td>
                            <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;226<br></td>
                        </tr>
                        <tr>
                            <td><span>2</span></td>
                            <td>&nbsp;&nbsp;JDG-MISSING</td>
                            <td>&nbsp;&nbsp;&nbsp;&nbsp;辅助</td>
                            <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;41</td>
                        </tr>

                        <tr>
                            <td><span>3</span></td>
                            <td>TES-Rookie</td>
                            <td>&nbsp;&nbsp;&nbsp;&nbsp;中单</td>
                            <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;190</td>
                        </tr>
                        <tr>
                            <td><span>4</span></td>
                            <td>TES-Mark</td>
                            <td>&nbsp;&nbsp;&nbsp;&nbsp;辅助</td>
                            <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;46</td>
                        </tr>
                        <tr>
                            <td><span>5</span></td>
                            <td>JDG-knight</td>
                            <td>&nbsp;&nbsp;&nbsp;&nbsp;中单</td>
                            <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;212</td>
                        </tr>

                    </tbody>
                </table>



            </div>

            <div class="herodata ">

                <h2 style="margin-left: -15px;">英雄数据</h2>
                <style>
                    .container {
                        position: relative;
                        background-color: #a4ffcc;
                        /* 父容器需要有明确的高度 */
                        height: 150px;
                        width: 200px;
                        margin: auto;
                        overflow: hidden;
                    }

                    .container>.scroll-list {
                        position: absolute;
                        top: 0px;
                        left: 0px;
                        width: 100%;
                        animation: scroll 12s linear infinite normal;
                    }

                    .container>.scroll-list>div {
                        width: 100%;
                        /* 滚动的项目需要有具体的高度 */
                        height: 30px;
                        background-color: #1183ca;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        color: white;
                    }

                    .container>.scroll-list>div:nth-child(2n) {
                        background-color: #16b0c8;
                    }

                    @keyframes scroll {
                        100% {
                            /* 需要滚动内容的总高度 */
                            top: -330px;
                        }
                    }
                </style>
                <div>
                    <tbody>
                        <tr>
                            <th scope="col" class="toptop">英雄名</th>
                            <th scope="col">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;出场次数</th>
                            <th scope="col">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Pick比率</th>
                            <th scope="col">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;胜率</th>
                        </tr>
                    </tbody>
                </div>
                <div class="container "
                    style="background-color: rgba(121, 191, 203, 0.341) ;margin-left: -15px;width: 325px; position: absolute;">

                    <div class="scroll-list">

                        <div>&nbsp;&nbsp;水晶先锋
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0%&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;100%&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        </div>
                        <div>&nbsp;&nbsp;琴瑟仙女
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0%&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;100%&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        </div>
                        <div>&nbsp;&nbsp;铸星龙王
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;4&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1%&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;75%&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        </div>
                        <div>&nbsp;&nbsp;魔法猫咪
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;57&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;17%&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;52%&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        </div>
                        <div>&nbsp;&nbsp;&nbsp;狂战士
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0%&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;100%&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        </div>
                        <div>&nbsp;&nbsp;众星之子
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;4&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1%&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;75%&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        </div>
                        <div>&nbsp;&nbsp;&nbsp;戏命师
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;43&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;13%&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;44%&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        </div>
                        <div>诺克萨斯之手
                            &nbsp;&nbsp;4&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1%&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;75%&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        </div>

                        <!-- 下面代码是为了让滚动内容能够多展示一屏(去除留白/无限轮播)-->
                        <div>&nbsp;&nbsp;水晶先锋
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0%&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;100%&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        </div>
                        <div>&nbsp;&nbsp;琴瑟仙女
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0%&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;100%&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        </div>
                        <div>&nbsp;&nbsp;铸星龙王
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;4&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1%&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;75%&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        </div>
                        <div>&nbsp;&nbsp;魔法猫咪
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;57&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;17%&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;52%&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        </div>
                        <div>&nbsp;&nbsp;&nbsp;狂战士
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0%&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;100%&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        </div>
                        <div>&nbsp;&nbsp;众星之子
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;4&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1%&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;75%&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        </div>
                        <div>&nbsp;&nbsp;&nbsp;戏命师
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;43&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;13%&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;44%&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        </div>
                        <div>诺克萨斯之手
                            &nbsp;&nbsp;4&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1%&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;75%&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        </div>

                    </div>
                </div>


                <div class="personalkill " style="position: absolute;margin-left: 355px; ">
                    <br><br><br><br><br><br><br>
                    <h2 style="margin-left: -36px">个人击杀数据</h2>

                    <div id="data9 "
                        style="height:335px;width:805px;margin-left: -37px;background-color: rgba(144, 190, 198, 0.2)  ">
                    </div>
                    <script>
                        var chart9 = echarts.init(document.getElementById("data9 "));
                        var option9 = {

                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                data: ['总击杀', '总助攻', '总死亡']
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            toolbox: {
                                feature: {
                                    saveAsImage: {}
                                }
                            },
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                data: ['JDG-Ruler', 'JDG-MISSING', 'TES-Rookie', 'TES-Mark', 'JDG-knight', 'BLG-Elk', 'RNG-GALA']
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [{
                                name: '总击杀',
                                type: 'line',
                                stack: 'Total',
                                data: [226, 41, 190, 46, 212, 356, 193],
                                smooth: 'true'
                            }, {
                                name: '总助攻',
                                type: 'line',
                                stack: 'Total',
                                data: [265, 519, 243, 441, 300, 347, 191],
                                smooth: 'true'
                            }, {
                                name: '总死亡',
                                type: 'line',
                                stack: 'Total',
                                data: [56, 107, 87, 100, 91, 144, 95],
                                smooth: 'true'
                            }]
                        };
                        chart9.setOption(option9);
                    </script>
                </div>

            </div>

            <div class="champion ">
                <h2 style="margin-left: -15px;">2023LPL春季赛总冠军</h2>
                <div style="margin-top: 340px;position: absolute;margin-left: 490px ;
                height: 50px;;">

                    <div>

                        <p align="center" style="font-size:16px;color: #9f9378;"> &copy; 版权由金智伟归属，未经允许不得复制、镜像</p>

                        <p align="center" style="font-size: 16px ;color: #9f9378;">本网络游戏适合18+岁的用户使用；为了您的健康，请合理控制游戏时间。
                        </p>
                    </div>
                </div>
                <div id="data2 "
                    style="height:335px;width:325px;position: absolute;background-color: rgba(144, 190, 198, 0.2);margin-left: -15px;  ">
                </div>
                <script>
                    var chart2 = echarts.init(document.getElementById("data2 "));
                    var option2 = {
                        legend: {
                            top: 'bottom',
                            textStyle: {
                                color: '#6F6F6F',
                                fontSize: 16
                            },
                        },
                        toolbox: {
                            show: true,
                            feature: {
                                mark: {
                                    show: true
                                },
                                dataView: {
                                    show: true,
                                    readOnly: false
                                },
                                restore: {
                                    show: true
                                },
                                saveAsImage: {
                                    show: true
                                }
                            }
                        },
                        series: [{
                            name: 'Nightingale Chart',
                            type: 'pie',
                            radius: [30, 80],
                            center: ['50%', '50%'],
                            roseType: 'area',
                            itemStyle: {
                                borderRadius: 8
                            },
                            data: [{
                                value: 84,
                                name: 'JDG'
                            }, {
                                value: 64,
                                name: 'WBG'
                            }, {
                                value: 47,
                                name: 'WE'
                            }, {
                                value: 31,
                                name: 'RA'
                            }, {
                                value: 18,
                                name: 'AL'
                            },
                            ],

                        }]
                    };
                    chart2.setOption(option2);
                </script>

                <div style="float: left;margin-left: 1140px; ">
                    <h2>选手KDA</h2>
                    <div id="data10 "
                        style="height:300px;width:305px;position: absolute;background-color: rgba(144, 190, 198, 0.2) ">
                    </div>
                    <script>
                        var chart10 = echarts.init(document.getElementById("data10 "));
                        var option10 = {
                            tooltip: {
                                trigger: 'item'
                            },
                            legend: {
                                top: '5%',
                                left: 'center',
                                // doesn't perfectly work with our tricks, disable it
                                selectedMode: false
                            },
                            series: [{
                                startAngle: 180, //起始角度
                                clockwise: false,
                                name: 'Access From',
                                type: 'pie',
                                radius: ['50%', '75%'],
                                center: ['50%', '50%'],
                                // adjust the start angle

                                label: {
                                    show: false,
                                    formatter(param) {
                                        // correct the percentage
                                        return ' (' + param.percent * 2 + '%)';
                                    }
                                },
                                data: [{
                                    value: 8.7,
                                    name: 'JDG-Ruler'
                                }, {
                                    value: 7.55,
                                    name: 'JDG-MISSING'
                                }, {
                                    value: 7.53,
                                    name: 'TES-Rookie'
                                }, {
                                    value: 7.48,
                                    name: 'TES-Mark'
                                }, {
                                    value: 6.99,
                                    name: 'JDG-knight'
                                }, {
                                    // make an record to fill the bottom 50%
                                    value: 8.7 + 7.5 + 7.53 + 7.48 + 6.99,
                                    itemStyle: {
                                        // stop the chart from rendering this piece
                                        color: 'none',
                                        decal: {
                                            symbol: 'none'
                                        }
                                    },
                                    label: {
                                        show: false
                                    }
                                }]
                            }]
                        };
                        chart10.setOption(option10);
                    </script>
                    <script>
                        var url = window.location.href;
                        var loging = false;
                        var grkj = document.querySelector('#grkj');
                        var xq = document.querySelector('#xq');
                        var login = document.querySelector('.dengru');
                        var create = document.querySelector('#zhuce');
                        var zhuce = document.querySelector('.zhuce');
                        searchid = function () {
                            var id = "";
                            var url = window.location.href;
                            var start = url.indexOf('?');
                            id = url.substring(start + 1, url.indexOf('id$'));
                            return id;
                        }
                        var usename = searchid();
                        usename = unescape(usename);
                        addname = function () {
                            var arr = check(usename);
                            return arr[2];
                        }

                        function check(id) {
                            var arr = [];
                            arr = localStorage.getItem(id).split(',');
                            return arr;
                        }
                        addid = function () {
                            return url.substring(url.indexOf('?') + 1, url.indexOf('id$'));
                        }
                        if (url.indexOf('id$') != -1) {
                            loging = true;
                        }
                        if (loging) {
                            grkj.href = 'xxzy.html?' + addid() + "id$";
                            xq.href = 'listinf_xbtzy.html?' + addid() + "id$";
                            login.style.display = 'none';
                            create.style.display = 'none';
                            zhuce.innerHTML = '欢迎您&nbsp;&nbsp;'+ addname()+"&nbsp;&nbsp;&nbsp;&nbsp;<a href='#' id='tuichu'>[点击登出]</a>";
                            var tuihcu=document.querySelector('#tuichu');
                            tuihcu.style.color='white'
                            tuihcu.onclick=function(){
                                location.href = 'index_xbtzy.html';
                            }
                        } else {
                            grkj.onclick = function () {
                                alert('请登录');
                            }
                            xq.onclick = function () {
                                alert('请登录');
                            }
                        }
                    </script>
                </div>
            </div>
        </div>

    </div>

</body>

</html>